<template>
	<view class="">
		<uni-table ref="table" :loading="loading" :border="false" :stripe="false" @selection-change="selectionChange"
			:emptyText="''">
			<uni-tr>
				<uni-th align="center" v-for="(header, key) in headers" :key="'header' + key">{{ header }}</uni-th>
			</uni-tr>

			<template v-if="tableData.length">
				<uni-tr v-for="(item, rowIndex) in tableData" :key="'rowIndex' + rowIndex">
					<!-- 动态渲染表格数据 -->
					<uni-td align="center" v-for="(header, headerKey) in headers" :key="'colIndex' + headerKey">
						<slot :name="(headerKey+rowIndex)" :item="`${headerKey}${rowIndex}`">
							<template v-if="!$slots[headerKey+rowIndex]">
								{{ item[headerKey] }}
							</template>
						</slot>

					</uni-td>
				</uni-tr>
			</template>

			<view class="noTableDataBox" v-else>
				<quesheng class="noTableData"></quesheng>
			</view>
		</uni-table>
		<view class="uni-pagination-box" v-if="tableData.length">
			<uni-pagination show-icon :page-size="pageSize" :current="current" :total="total" @change="change" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			headers: {
				type: Object,
				default: () => {}
			},
			tableData: {
				type: Array,
				default: () => []
			},
			total: {
				type: Number,
				default: 0
			},
			pageSize: {
				type: Number,
				default: 10
			},
			value: {}
		},
		computed: {
			current: {
				get() {
					return this.value;
				},
				set(val) {
					this.$emit('input', val);
				}
			}
		},
		data() {
			return {
				loading: false,
			}
		},
		methods: {
			selectionChange() {},
			change(e) {
				this.current = e.current
				this.$emit('change', e)
			}

		}
	}
</script>

<style lang="less" scoped>
	.noTableDataBox {
		position: relative;
		height: 100px;
		/* #ifndef APP-NVUE */
		display: table-row;
		/* #endif */
	}

	.noTableData {
		position: absolute;
		right: 0;
		left: 0;
		text-align: center;
		font-size: 14px;
		color: #999;
		height: auto;
	}

	/deep/.uni-table {
		background-color: #1e232a;
	}

	/deep/.uni-table-th {
		border-color: rgba(0, 0, 0, .12);
	}

	/deep/.uni-table-tr:nth-child(n + 2):hover {
		background-color: rgba(0, 0, 0, .22) !important;
	}

	/deep/.uni-table-td {
		color: #FFF;
		border-color: rgba(0, 0, 0, .12);
	}

	.uni-pagination-box {
		margin-top: 10px;
	}
</style>